<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/Timeline.css" type="text/css">
<script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
<title>时间轴</title>
</head>

<body>
  
<script type="module">
  import { main } from "./js/Timeline.js";
  main("time");
</script>


<div class="fixed-top">
  <ul class="navbar">
    <li><a href="./index.html">首页</a></li>
    <li><a href="#">时间轴</a></li>
    <li><a href="./category.html">分类</a></li>
    <li><a href="./edit-article.html">发布文章</a></li>
    <li><a href="./Avatar.html">个人主页</a></li>
    <li><a href="./about.html">关于</a></li>
    <li><a href="./login.html">登录</a></li>
  </ul>
  <div class="search-bar">
    <input type="text" id="searchInput" placeholder="搜索文章..." onkeypress="handleKeyPress(event)">
    <input type="button" value="🔍" id="searchBtn">
  </div>
</div>

<div class="content">
    <div class="icon-row">
      <img src="./img/alarm-clock-2175393_1280.jpg" alt="时间轴" class="timeline-icon">
      <p class="timeline-text">时间轴</p> <!-- 添加时间轴文字 -->
      <!-- 更多图标... -->
    </div>
  
    <div class="timeline" id="timeline">
      <!-- 动态加载的文章将会显示在这里 -->
    </div>
</div>

</body>
</html>
